<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
// import { Location, Search } from '@element-plus/icons-vue'

let mainBoxRef = ref(null);
let iptBoxRef = ref(null);

let mainBoxHeight = ref("");

let iptValue = ref("");
let realValue = ref("");

let searchStatus = ref(false);

const searchData = () => {
  realValue.value = iptValue.value;
  if (
    !searchStatus.value &&
    realValue.value !== "地点" &&
    realValue.value !== "无结果"
  ) {
    // 默认状态
    searchStatus.value = false;
    mainBoxHeight.value = document.querySelector(".iptBox").clientHeight;
  } else if (realValue.value == "地点") {
    if (!searchStatus.value) searchStatus.value = true;
    nextTick(() => {
      let img = document.querySelector(".weatherBox");
      if (img.complete) {
        // 图片已加载
        mainBoxHeight.value =
          document.querySelector(".iptBox").clientHeight +
          document.querySelector(".searchBox").clientHeight;
      } else {
        // 图片未加载完成，监听 load 事件
        img.onload = () => {
          mainBoxHeight.value =
            document.querySelector(".iptBox").clientHeight +
            document.querySelector(".searchBox").clientHeight;
        };
      }
    });
  } else {
    if (!searchStatus.value) searchStatus.value = true;
    nextTick(() => {
      mainBoxHeight.value =
        document.querySelector(".iptBox").clientHeight +
        document.querySelector(".searchBox").clientHeight;
    });
  }
};

const styleObject = computed(() => {
  return searchStatus.value
    ? { transform: "scaleY(1)" }
    : { transform: "scaleY(0)" };
});

onMounted(() => {
  mainBoxHeight.value = document.querySelector(".iptBox").clientHeight;
});
</script>

<template>
  <div>
    <div
      class="mainBox"
      ref="mainBoxRef"
      :style="{ height: mainBoxHeight + 'px' }"
    >
      <el-input
        class="iptBox"
        ref="iptBoxRef"
        v-model="iptValue"
        placeholder="输入地址"
      >
        <template #prefix>
          <component is="Location" style="width: 16px; color: #fff" />
        </template>
        <template #suffix>
          <component
            is="Search"
            style="width: 16px; cursor: pointer; color: #fff"
            @click="searchData"
          />
        </template>
      </el-input>
      <div class="searchBox" :style="styleObject">
        <div class="innerBox1" v-if="searchStatus && realValue == '无结果'">
          <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut,
            doloremque similique! Repudiandae fugit harum ducimus dolores?
            Inventore asperiores doloremque unde quo totam, vero, id voluptate
            placeat, delectus quibusdam amet necessitatibus.
          </span>
        </div>
        <div class="innerBox2" v-if="searchStatus && realValue == '地点'">
          <img class="weatherBox" src="./assets/images/sun.png" alt="" />
          <div class="weatherInfos">
            <div class="leftInfo">
              <div class="valueDiv">8℃</div>
              <div>今日温度</div>
            </div>
            <div class="rightInfo">
              <div class="valueDiv">4级</div>
              <div>今日风力</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tip">tips: 输入 '无结果'、 '地点'、 或其他内容查看不同状态</div>
  </div>
</template>

<style scoped>
::v-deep .el-input__wrapper {
  background: transparent;
}
::v-deep .el-input__inner {
  color: #fff;
}

::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.mainBox {
  width: 320px;
  padding: 20px 20px 30px;
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  will-change: height;
  transition: height 0.4s;
  transition-timing-function: ease-in;
}

.searchBox {
  margin-top: 10px;
  overflow: hidden;
}

.innerBox1 {
  animation: topToBottom 0.4s linear forwards;
  animation-delay: 1.2s;
  transform: translateY(-100%);
}

@keyframes topToBottom {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0%);
    opacity: 1;
  }
}

.innerBox2 {
  display: block;
}

.weatherBox {
  margin: 0 auto;
  display: block;
  text-align: center;
  animation: topToBottom 0.4s linear forwards;
  animation-delay: 0.8s;
  transform: translateY(-100%);
}

.weatherInfos {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}

.weatherInfos .leftInfo,
.weatherInfos .rightInfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
  animation: topToBottom 0.4s linear forwards;
  animation-delay: 0.8s;
  transform: translateY(-100%);
}

.weatherInfos .leftInfo .valueDiv,
.weatherInfos .rightInfo .valueDiv{
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 4px;
  animation: topToBottom 0.6s linear forwards;
  animation-delay: 1.2s;
  transform: translateY(-100%);
}

.tip {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
}
</style>
